<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue";

const phone = ref("")
const showExit = ref(false)

const scrollTop = ref<number>(0); // 记录当前的滚动距离
const showBg = ref(false);

const getAccount = () => {
    showExit.value = false
    if(localStorage.getItem('token')){
        phone.value = localStorage.token as string        
        showExit.value = true
    }
}

const clearLogin = () => {
    localStorage.removeItem('token')
    phone.value = ''
}

// 滚动事件
const onScroll = () => {
    scrollTop.value = window.scrollY;
    showBg.value = false
    
    if(scrollTop.value > 20){
        showBg.value = true
    }
}

onMounted(() => {
    getAccount()
    window.addEventListener('scroll', onScroll, true)
})

onBeforeUnmount(() => {
    // 停止监听
    window.removeEventListener('scroll', onScroll)
})
</script>

<template>
    <div class="mine-page-top" :class="{ active: showBg }">
        <div></div>
        <!-- <div>我的</div> -->
        <div class="mine-top-img">
            <img src="../assets/imgs/mine/br0.png" alt="">
            <img src="../assets/imgs/mine/br2.png" alt="">
        </div>
    </div>

    <div class="mine-top">
        <div class="mine-user">
            <div class="user-via">
                <img class="user-img" src="../assets/imgs/mine/b93.png" alt="">
                <div class="user-login" @click="$router.push({name:'login'})">{{phone?phone:"立即登录"}}</div>
            </div>
            <div class="my-page">个人主页 <img class="right-img" src="../assets/imgs/mine/a63.png"> </div>
        </div>
        <div class="history" @click="$router.push({name:'want'})">
            <div class="history-item">
                <div><span></span>想看</div>
                <img class="right-img" src="../assets/imgs/mine/bci.png">
            </div>
            <div class="history-item">
                <div><span></span>看过</div>
                <img class="right-img" src="../assets/imgs/mine/bci.png">
            </div>
        </div>
    </div>

    <div class="mine-main">
        <div class="mine-order">
            <div class="mine-title">我的订单</div>
            <div class="order-list">
                <div class="order-item" @click="$router.push({name:'order'})">
                    <img src="../assets/imgs/mine/bke.png" alt="">
                    <div>电影票</div>
                </div>
                <div class="order-item">
                    <img src="../assets/imgs/mine/bkh.png" alt="">
                    <div>演出/玩乐</div>
                </div>
                <div class="order-item">
                    <img src="../assets/imgs/mine/bkf.png" alt="">
                    <div>在线观影</div>
                </div>
                <div class="order-item">
                    <img src="../assets/imgs/mine/bkg.png" alt="">
                    <div>周边</div>
                </div>
            </div>
        </div>

        <div class="mine-card">
            <div class="mine-card-item">
                <div class="card-name">优惠券</div>
                <div class="card-desc">购票享优惠</div>
            </div>
            <div class="mine-card-item">
                <div class="card-name">影城卡</div>
                <div class="card-desc">开卡立省</div>
            </div>
            <div class="mine-card-item">
                <div class="card-name">猫享卡</div>
                <div class="card-desc">去绑卡</div>
            </div>
            <div class="mine-card-item">
                <div class="card-name">喵币</div>
                <div class="card-desc">购票送喵币</div>
            </div>
        </div>

        <div class="serve-title">精选服务</div>
        <div class="serve-card-list">
            <div class="serve-card-item">
                <div class="serve-card-title">省钱日卡</div>
                <div class="serve-card-con">
                    <div class="serve-card-txt">
                        <div>双享礼遇 购票立减</div>
                        <div class="serve-card-span">点击省钱</div>
                    </div>
                    <img class="serve-card-img" src="../assets/imgs/mine/1.png">
                </div>
            </div>
            <div class="serve-card-item">
                <div class="serve-card-title">0无观演</div>
                <div class="serve-card-con">
                    <div class="serve-card-txt">
                        <div>看展看剧 免费体验</div>
                        <div class="serve-card-span">立即报名</div>
                    </div>
                    <img class="serve-card-img" src="../assets/imgs/mine/2.png">
                </div>
            </div>
            <div class="serve-card-item">
                <div class="serve-card-title">周边商城</div>
                <div class="serve-card-con">
                    <div class="serve-card-txt">
                        <div>《深海》周边治愈上线</div>
                        <div class="serve-card-span">立即抢购</div>
                    </div>
                    <img class="serve-card-img" src="../assets/imgs/mine/3.png">
                </div>
            </div>
            <div class="serve-card-item">
                <div class="serve-card-title">数字藏品</div>
                <div class="serve-card-con">
                    <div class="serve-card-txt">
                        <div>带你玩转 数字娱乐</div>
                        <div class="serve-card-span">开尼探索</div>
                    </div>
                    <img class="serve-card-img" src="../assets/imgs/mine/4.png">
                </div>
            </div>
            <div class="serve-card-item">
                <div class="serve-card-title">一键包场</div>
                <div class="serve-card-con">
                    <div class="serve-card-txt">
                        <div>猫眼包场 省心省力</div>
                        <div class="serve-card-span">我要包场</div>
                    </div>
                    <img class="serve-card-img" src="../assets/imgs/mine/5.png">
                </div>
            </div>
            <div class="serve-card-item">
                <div class="serve-card-title">正在热映</div>
                <div class="serve-card-con">
                    <div class="serve-card-txt">
                        <div>11部影片正在热映</div>
                        <div class="serve-card-span">查看排片</div>
                    </div>
                    <img class="serve-card-img" src="../assets/imgs/mine/6.png">
                </div>
            </div>
        </div>

        <div class="serve-title">更多服务</div>
        <div class="more-serve">
            <div class="more-serve-item">
                <img src="../assets/imgs/mine/ticket.png">
                <div>纪念票</div>
            </div>
            <div class="more-serve-item">
                <img src="../assets/imgs/mine/bag.png">
                <div>钱包</div>
            </div>
            <div class="more-serve-item">
                <img src="../assets/imgs/mine/card.png">
                <div>银行卡</div>
            </div>
            <div class="more-serve-item">
                <img src="../assets/imgs/mine/up.png">
                <div>上传</div>
            </div>
            <div class="more-serve-item">
                <img src="../assets/imgs/mine/r.png">
                <div>认证</div>
            </div>
            <div class="more-serve-item">
                <img src="../assets/imgs/mine/join.png">
                <div>招聘</div>
            </div>
        </div>
        <div class="exit" @click="clearLogin" v-show="phone != '' ">退出登录</div>
    </div>
</template>

<style lang="scss" scoped>
.mine-page-top{
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    height: 12vw;
    padding: 0 4vw;
    box-sizing: border-box;
    z-index: 9999;

    &.active{
        background-color: #ffffff;
    }
    
    div{
        font-size: 18px;
        font-family: "宋体";
        font-weight: bold;
        width: 18%;
        height: 12vw;
        line-height: 12vw;
        text-align: center;
        letter-spacing: 2px;
    }

    .mine-top-img{
        display: flex;
        justify-content: space-between;
        align-items: center;

        img{
            width: 6vw;
            height: 6vw;
        }
    }
}

.mine-top{
    width: 100vw;
    height: 58vw;
    padding: 16vw 4vw 0 4vw;
    box-sizing: border-box;
    background: linear-gradient(#fcdad9,#f6f6f6);
    position: relative;
    overflow: hidden;

    .mine-user{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .user-via{
            height: 20vw;
            display: flex;
            align-items: center;

            .user-img{
                width: 15vw;
                height: 15vw;
                border: #fff 3px solid;
                border-radius: 50%;
            }

            .user-login{
                font-size: 4vw;
                margin-left: 4vw;
            }
        }

        .my-page{
            color: #a19997;
            font-size: 14px;
            position: absolute;
            right: -5vw;
            width: 28vw;
            height: 9vw;
            line-height: 9vw;
            padding-left: 4vw;
            background: linear-gradient(to right,#ffffff 48%,transparent);
            border-radius: 10vw 0 0 10vw;
            border: #f7eaea 1px solid;

            .right-img{
                width: 2vw;
                display: inline-block;
                vertical-align: middle;
                margin-left: 1vw;
            }
        }
    }

    .history{
        width: 100%;
        height: 15vw;
        background-color: #fbf7f8;
        border-radius: 2vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 4vw;

        .history-item{
            width: 50%;
            height: 4.5vw;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1vw;
            box-sizing: border-box;
            border-right: #e2e0e1 1px solid;

            &:last-of-type{
                border-right: none;
            }

            div{
                display: flex;
                align-items: center;

                span{
                    width: 9.5px;
                    height: 2.2px;
                    display: inline-block;
                    background-color: #343233;
                    border-radius: 1px;
                    margin: 0 2vw;
                }
            }

            .right-img{
                width: 3.6vw;
            }
        }
    }
}

.mine-main{
    width: 100vw;
    padding: 0 4vw;
    box-sizing: border-box;
    background-color: #f6f6f6;
    padding-bottom: 18vw;

    .mine-order{
        padding: 2vw 0;
        box-sizing: border-box;
        background-color: #ffffff;
        border-radius: 2vw;

        .mine-title{
            color: #323232;
            padding-left: 4vw;
            line-height: 10vw;
            font-weight: bold;
            // font-size: 18px;
        }
        .order-list{
            display: flex;
            justify-content: space-between;
            margin: 2vw 0;

            .order-item{
                color: #343233;
                font-size: 14px;
                width: 25%;
                line-height: 6vw;
                text-align: center;

                img{
                    width: 7.5vw;
                }
            }
        }
    }

    .mine-card{
        display: flex;
        justify-content: space-between;
        text-align: center;
        background-color: #ffffff;
        margin-top: 4vw;
        padding: 3.5vw 3vw;
        border-radius: 2vw;

        .mine-card-item{
            line-height: 7vw;

            .card-name{
                color: #323232;
                font-weight: bold;
            }
            .card-desc{
                color: #8c8c8c;
                font-size: 14px;
            }
        }
    }


    .serve-title{
        color: #343233;
        font-size: 14px;
        margin-top: 6vw;
        margin-bottom: 2vw;
    }

    .serve-card-list{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .serve-card-item{
            width: 44%;
            background-color: #ffffff;
            border-radius: 2vw;
            margin: 2vw 0;
            padding: 4vw 2vw;
            // border: #343233 1px solid;

            .serve-card-title{
                margin-bottom: 4vw;
            }
            .serve-card-con{
                font-size: 14px;
                color: #343233;
                display: flex;
                justify-content: space-between;
                
                .serve-card-txt{
                    width:25vw;
                    line-height: 5vw;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-between;
                    letter-spacing: 1px;

                    .serve-card-span{
                        font-size: 12px;
                        color: #8c8c8c;
                    }
                }
                .serve-card-img{
                    width: 18vw;
                    height: 18vw;
                    border-radius: 2vw;
                }
            }
        }
    }

    .more-serve{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        background-color: #ffffff;
        border-radius: 2vw;
        margin-top: 4vw;
        padding-top: 2vw;

        .more-serve-item{
            color: #343233;
            font-size: 14px;
            width: 25%;
            text-align: center;
            line-height: 6vw;
            margin: 3vw 0;

            img{
                width: 8vw;
            }
        }
    }
    
    .exit{
        color: #f03d37;
        text-align: center;
        width: 100%;
        height: 13vw;
        line-height: 13vw;
        background-color: #ffffff;
        border-radius: 2vw;
        margin-top: 4vw;
    }
}

</style>